<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MapBox GL飞行管理</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    var origin=[ 113.14882636,25.91631636]
    var destination=[ 113.11022401,25.98342176]
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken ='pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tyZWN3amRmMXlvNjJwcDhjMmp2dmNhdSJ9.tXwGurJrDL8trPienpr-bg';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        center: origin,
        zoom: 9
    });

    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    // mapboxgl.accessToken = 'YOUR ACCESS TOKEN';
    // var map = new mapboxgl.Map({
    //     container: 'map',
    //     style: 'mapbox://styles/mapbox/dark-v10',
    //     center: [-96, 37.8],
    //     zoom: 3
    // });

    // const popup = new mapboxgl.Popup({ closeOnClick: false })
    //     .setLngLat([-96, 37.8])
    //     .setHTML('<h1>Hello World!</h1>')
    //     .addTo(map);

    // San Francisco
    // var origin = [-122.414, 37.776];
    //
    // // Washington DC
    // var destination = [-77.032, 38.913];

    // A simple line from origin to destination.
    var route = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [origin, destination]
                }
            }
        ]
    };

    var point = {
        'type': 'FeatureCollection',
        'features': [
            {
                'type': 'Feature',
                'properties': {},
                'geometry': {
                    'type': 'Point',
                    'coordinates': origin
                }
            }
        ]
    };
    // Calculate the distance in kilometers between route start/end point.
    var lineDistance = turf.lineDistance(route.features[0], 'kilometers');

    var arc = [];

    // Number of steps to use in the arc and animation, more steps means
    // a smoother arc and animation, but too many steps will result in a
    // low frame rate
    var steps = 500;

    // Draw an arc between the `origin` & `destination` of the two points
    for (var i = 0; i < lineDistance; i += lineDistance / steps) {
        var segment = turf.along(route.features[0], i, 'kilometers');
        arc.push(segment.geometry.coordinates);
    }
    // Update the route with calculated arc coordinates
    route.features[0].geometry.coordinates = arc;

    // Used to increment the value of the point measurement against the route.
    var counter = 0;
    function animate() {
        // Update point geometry to a new position based on counter denoting
        // the index to access the arc.
        point.features[0].geometry.coordinates =
            route.features[0].geometry.coordinates[counter];

        // Calculate the bearing to ensure the icon is rotated to match the route arc
        // The bearing is calculate between the current point and the next point, except
        // at the end of the arc use the previous point and the current point
        point.features[0].properties.bearing = turf.bearing(
            turf.point(
                route.features[0].geometry.coordinates[
                    counter >= steps ? counter - 1 : counter
                    ]
            ),
            turf.point(
                route.features[0].geometry.coordinates[
                    counter >= steps ? counter : counter + 1
                    ]
            )
        )}

</script>
</body>
</html>